

import { count, log } from "console";
import React, { Component } from "react";
import type { ReactNode } from 'react'

export default class App extends Component {

    state = {
        name: '张三',
        age: 18,
    }

    changeValue(e:React.ChangeEvent<HTMLInputElement>){ 
        
        // dir 是详细的输入
        // console.dir(e.target); 
        this.setState({
        [e.target.name] : e.target.value
        })
    }
    render() {

        return <>
          <div>
            <h1>父组件 - {this.state.name} - {this.state.age}</h1>

            {/* 该写法比较繁琐，因为多次使用且代码基本一样，不够美观 */}
            <input type="text" placeholder="请输入名字" value={this.state.name} onChange={(e) => { 
                this.setState({
                    name: e.target.value
                })
            }} />

            <input type="text" placeholder="请输入年龄" value={this.state.name} onChange={(e) => { 
                this.setState({
                    age: e.target.value
                })
            }} />


            <hr />
            {/* name 属性是提交表单到服务器的时候，后端可以通过 name 取值 */}
            <input type="text" placeholder="请输入名字" name="name" value={this.state.name} onChange={e => this.changeValue(e)} />
            <input type="text" placeholder="请输入年龄" name="age" value={this.state.age} onChange={e => this.changeValue(e)} />

          </div>
        </>
    }

}